<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>Crafty - Crafty.loader</title>
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind</a></li><li><a href="Crafty-c.html">Crafty.c</a></li><li><a href="Crafty-clone.html">Crafty.clone</a></li><li><a href="Crafty-e.html">Crafty.e</a></li><li><a href="Crafty-extend.html">Crafty.extend</a></li><li><a href="Crafty-frame.html">Crafty.frame</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion</a></li><li><a href="Crafty-init.html">Crafty.init</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused</a></li><li><a href="Crafty-one.html">Crafty.one</a></li><li><a href="Crafty-pause.html">Crafty.pause</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger</a></li><li><a href="Crafty-unbind.html">Crafty.unbind</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Gravity.html">Gravity</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-image_whitelist.html">Crafty.image_whitelist</a></li><li><a href="Crafty-loader.html">Crafty.loader</a></li><li><a href="Crafty-paths.html">Crafty.paths</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent</a></li><li><a href="Crafty-bind.html">Crafty.bind</a></li><li><a href="Crafty-one.html">Crafty.one</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent</a></li><li><a href="Crafty-trigger.html">Crafty.trigger</a></li><li><a href="Crafty-unbind.html">Crafty.unbind</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor</a></li><li><a href="Crafty-background.html">Crafty.background</a></li><li><a href="Crafty-canvas.html">Crafty.canvas</a></li><li><a href="Crafty-DOM.html">Crafty.DOM</a></li><li><a href="Crafty-DrawManager.html">Crafty.DrawManager</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart</a></li><li><a href="Crafty-sprite.html">Crafty.sprite</a></li><li><a href="DOM.html">DOM</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="Crafty-eventObject.html">Crafty.eventObject</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="KeyboardEvent.html">KeyboardEvent</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background</a></li><li><a href="Crafty-scene.html">Crafty.scene</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Crafty.loader</h1><div id="Crafty-loader"><div class="crafty-method"><code class="signature">public void Crafty.load(Object assets, Function onLoad[, Function onProgress[, Function onError]])</code><dl class="parameter"><dt> assets </dt><dd><span class="markdown"><p>Object JSON formatted (or JSON string), with assets to load (accepts sounds, images and sprites)</p>
</span></dd></dl><dl class="parameter"><dt> onLoad </dt><dd><span class="markdown"><p>Callback when the assets are loaded</p>
</span></dd></dl><dl class="parameter"><dt> onProgress </dt><dd><span class="markdown"><p>Callback when an asset is loaded. Contains information about assets loaded</p>
</span></dd></dl><dl class="parameter"><dt> onError </dt><dd><span class="markdown"><p>Callback when an asset fails to load</p>
</span></dd></dl></div><span class="markdown"><p>Preloader for all assets. Takes a JSON formatted object (or JSON string) of files and adds them to the
<code>Crafty.assets</code> object, as well as setting sprites accordingly.</p>
<p>Format must follow the pattern shown in the example below, but it&#39;s not required to pass all &quot;audio&quot;,
&quot;images&quot; and &quot;sprites&quot; properties, only those you&#39;ll need. For example, if you don&#39;t need to preload
sprites, you can omit that property.</p>
<p>By default, Crafty will assume all files are in the current path.  For changing these,
use the function <code>Crafty.paths</code>.</p>
<p>Files with suffixes in <code>image_whitelist</code> (case insensitive) will be loaded.</p>
<p>It&#39;s possible to pass the full file path(including protocol), instead of just the filename.ext, in case
you want some asset to be loaded from another domain.</p>
<p>If <code>Crafty.support.audio</code> is <code>true</code>, files with the following suffixes <code>mp3</code>, <code>wav</code>, <code>ogg</code> and
<code>mp4</code> (case insensitive) can be loaded.</p>
<p>The <code>onProgress</code> function will be passed on object with information about
the progress including how many assets loaded, total of all the assets to
load and a percentage of the progress.</p>
<pre><code class="hljs ">{ loaded: j, total: total, percent: (j / total * <span class="hljs-number">100</span>), src:src }</code></pre><p><code>onError</code> will be passed with the asset that couldn&#39;t load.</p>
<p>When <code>onError</code> is not provided, the onLoad is loaded even when some assets are not successfully loaded.
Otherwise, onLoad will be called no matter whether there are errors or not.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">var</span> assetsObj = {
    <span class="hljs-string">"audio"</span>: {
        <span class="hljs-string">"beep"</span>: [<span class="hljs-string">"beep.wav"</span>, <span class="hljs-string">"beep.mp3"</span>, <span class="hljs-string">"beep.ogg"</span>],
        <span class="hljs-string">"boop"</span>: <span class="hljs-string">"boop.wav"</span>,
        <span class="hljs-string">"slash"</span>: <span class="hljs-string">"slash.wav"</span>
    },
    <span class="hljs-string">"images"</span>: [<span class="hljs-string">"badguy.bmp"</span>, <span class="hljs-string">"goodguy.png"</span>],
    <span class="hljs-string">"sprites"</span>: {
        <span class="hljs-string">"animals.png"</span>: {
            <span class="hljs-string">"tile"</span>: <span class="hljs-number">50</span>,
            <span class="hljs-string">"tileh"</span>: <span class="hljs-number">40</span>,
            <span class="hljs-string">"map"</span>: { <span class="hljs-string">"ladybug"</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">0</span>], <span class="hljs-string">"lazycat"</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">1</span>], <span class="hljs-string">"ferociousdog"</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">2</span>] }
            <span class="hljs-string">"paddingX"</span>: <span class="hljs-number">5</span>,
            <span class="hljs-string">"paddingY"</span>: <span class="hljs-number">5</span>,
            <span class="hljs-string">"paddingAroundBorder"</span>: <span class="hljs-number">10</span>
        },
        <span class="hljs-string">"vehicles.png"</span>: {
            <span class="hljs-string">"tile"</span>: <span class="hljs-number">150</span>,
            <span class="hljs-string">"tileh"</span>: <span class="hljs-number">75</span>,
            <span class="hljs-string">"map"</span>: { <span class="hljs-string">"car"</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">0</span>], <span class="hljs-string">"truck"</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">1</span>] }
        }
    },
};

Crafty.load(assetsObj, <span class="hljs-comment">// preload assets</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-comment">//when loaded</span>
        Crafty.scene(<span class="hljs-string">"main"</span>); <span class="hljs-comment">//go to main scene</span>
        Crafty.audio.play(<span class="hljs-string">"boop"</span>); <span class="hljs-comment">//Play the audio file</span>
        Crafty.e(<span class="hljs-string">'2D, DOM, lazycat'</span>); <span class="hljs-comment">// create entity with sprite</span>
    },

    <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{ <span class="hljs-comment">//progress</span>
    },

    <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{ <span class="hljs-comment">//uh oh, error loading</span>
    }
);</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Crafty-paths.html">Crafty.paths</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-image_whitelist.html">Crafty.image_whitelist</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets</a></li></ul></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
